<template>
  <div class="question-add">
    <el-dialog
      :title="mode === 'add' ? '新增试题' : '编辑试题'"
      :visible.sync="visible"
      fullscreen
      top="0"
      @close="close"
    >
      <el-form
        ref="addForm"
        :model="dataForm"
        :rules="rules"
        style="width: 830px; margin: 0 auto"
      >
        <el-form-item label="学科" prop="subject">
          <el-select v-model="dataForm.subject" placeholder="请选择">
            <el-option
              v-for="item in subjectOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="阶段" prop="step">
          <el-select v-model="dataForm.step" placeholder="请选择">
            <el-option label="初级" value="1" />
            <el-option label="中级" value="2" />
            <el-option label="高级" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterprise">
          <el-select v-model="dataForm.enterprise" placeholder="请选择">
            <el-option
              v-for="item in enterpriseOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-cascader
            v-model="dataForm.city"
            size="large"
            :options="regionDataPlus"
            :props="{ value: 'label' }"
          />
        </el-form-item>
        <el-form-item label="题型" prop="type">
          <el-radio-group v-model="dataForm.type">
            <el-radio :label="1">单选</el-radio>
            <el-radio :label="2">多选</el-radio>
            <el-radio :label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="dataForm.difficulty">
            <el-radio :label="1">简单</el-radio>
            <el-radio :label="2">一般</el-radio>
            <el-radio :label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider />
        <el-form-item label="试题标题" class="title-item-wrap" prop="title">
          <div class="title">
            <keep-alive>
              <tinymce
                id="question-title"
                v-model="dataForm.title"
                height="200"
                :width="820"
              />
            </keep-alive>
          </div>
        </el-form-item>
        <el-form-item
          v-if="dataForm.type === 1"
          label="单选"
          class="answer-item-wrap"
          prop="single_select_answer"
        >
          <el-radio-group v-model="dataForm.single_select_answer">
            <div
              v-for="(item, index) in selectOptions"
              :key="index"
              class="type-item-wrap"
            >
              <el-radio :label="item.label" />
              <el-input v-model="item.text" placeholder="请输入内容" />
              <upload-img
                v-model="item.imgUrl"
                :http-request="httpRequest"
                @click.native="currIndex = index"
              />
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="dataForm.type === 2"
          label="多选"
          class="answer-item-wrap"
          prop="multiple_select_answer"
        >
          <el-checkbox-group v-model="dataForm.multiple_select_answer">
            <div
              v-for="(item, index) in selectOptions"
              :key="index"
              class="type-item-wrap"
            >
              <el-checkbox :label="item.label" :value="item.label">
                <el-input v-model="item.text" placeholder="请输入内容" />
                <upload-img
                  v-model="item.imgUrl"
                  :http-request="httpRequest"
                  @click.native="currIndex = index"
                />
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          v-if="dataForm.type === 3"
          label="简答"
          class="answer-item-wrap"
          prop="short_answer"
        >
          <div class="answer">
            <keep-alive>
              <tinymce
                id="question-answer"
                v-model="dataForm.short_answer"
                height="200"
              />
            </keep-alive>
          </div>
        </el-form-item>
        <el-form-item label="解析视频">
          <upload-video
            ref="video"
            :visible-video="dataForm.video === ''"
            :value="videoUrl"
            @input="dataForm.video = $event"
          />
        </el-form-item>
        <el-form-item
          label="答案解析"
          class="analysis-item-wrap"
          prop="answer_analyze"
        >
          <div class="analysis">
            <keep-alive>
              <tinymce
                id="question-analysis"
                v-model="dataForm.answer_analyze"
                height="200"
              />
            </keep-alive>
          </div>
        </el-form-item>
        <el-divider />
        <el-form-item label="试题备注" class="remark-item-wrap" prop="remark">
          <div class="title">
            <keep-alive>
              <tinymce
                id="question-remark"
                v-model="dataForm.remark"
                height="200"
              />
            </keep-alive>
          </div>
        </el-form-item>
        <el-form-item class="btn-item-wrap" prop="rid">
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import tinymce from '@/components/Tinymce/'
import UploadVideo from '@/components/UploadVideo'

import { regionDataPlus } from 'element-china-area-data'
export default {
  name: '',
  components: {
    tinymce,
    UploadVideo
  },
  props: {
    enterpriseOptions: {
      type: Array,
      default: () => []
    },
    subjectOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      mode: 'add',
      currIndex: 1,
      regionDataPlus,
      videoUrl: '',
      selectOptions: [
        {
          label: 'A',
          text: '',
          imgUrl: '',
          image: ''
        },
        {
          label: 'B',
          text: '',
          imgUrl: '',
          image: ''
        },
        {
          label: 'C',
          text: '',
          imgUrl: '',
          image: ''
        },
        {
          label: 'D',
          text: '',
          imgUrl: '',
          image: ''
        }
      ],
      dataForm: {
        title: '', // 标题
        subject: '', // 学科id标识
        step: '', // 阶段1、初级 2、中级 3、高级
        enterprise: '', // 企业id标识
        city: '', // [省、市、区县]
        type: 1, // 题型 1单选 、2多选 、3简答
        difficulty: 1, // 题目难度 1简单 、2一般 、3困难
        single_select_answer: '', // 单选题答案
        multiple_select_answer: [], // 多选题答案
        short_answer: '', // 简答题答案
        video: '', // 解析视频地址
        answer_analyze: '', // 答案解析
        remark: '', // 答案备注
        select_options: [] // 选项，介绍，图片介绍
      },
      rules: {
        title: [{ required: true, message: '必填', trigger: 'change' }],
        subject: [{ required: true, message: '必填', trigger: 'change' }],
        step: [{ required: true, message: '必填', trigger: 'change' }],
        enterprise: [{ required: true, message: '必填', trigger: 'change' }],
        city: [{ required: true, message: '必填', trigger: 'change' }],
        type: [{ required: true, message: '必填', trigger: 'change' }],
        difficulty: [{ required: true, message: '必填', trigger: 'change' }],
        single_select_answer: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        multiple_select_answer: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        short_answer: [{ required: true, message: '必填', trigger: 'change' }],
        // video: [{ required: true, message: '必填', trigger: 'change' }],
        answer_analyze: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        remark: [{ required: true, message: '必填', trigger: 'change' }],
        select_options: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  methods: {
    async httpRequest(res) {
      const currItem = this.selectOptions[this.currIndex]
      const formData = new FormData()
      formData.append('file', res.file)
      const result = await this.$api.question.questionUploadPost(formData)
      currItem.image = result.data.url
      currItem.imgUrl = this.baseApi + currItem.image
    },
    async submit() {
      this.$refs.addForm.validate(async(valid) => {
        if (!valid) {
          return
        }
        if (this.dataForm.type === 1) {
          this.dataForm.short_answer = ''
          this.dataForm.multiple_select_answer = []
          this.dataForm.select_options = this.getSelectOptions()
        }
        if (this.dataForm.type === 2) {
          this.dataForm.single_select_answer = ''
          this.dataForm.short_answer = ''
          this.dataForm.select_options = this.getSelectOptions()
        }
        if (this.dataForm.type === 3) {
          this.dataForm.single_select_answer = ''
          this.dataForm.multiple_select_answer = []
        }
        // const city = this.deepCopy(this.dataForm.city)
        if (this.mode === 'add') {
          await this.$api.question.questionAddPost(this.dataForm)
        } else {
          await this.$api.question.questionEditPost(this.dataForm)
        }
        this.$message.success(
          `${this.mode === 'add' ? '新增试题' : '编辑试题'} 成功`
        )
        this.visible = false
        this.$emit('refresh')
      })
    },
    getSelectOptions() {
      return this.selectOptions.map((item) => ({
        label: item.label,
        text: item.text,
        image: item.image
      }))
    },
    formReset() {
      if (this.$refs.video && this.mode === 'add') {
        this.$refs.video.videoForm.showVideoPath = ''
        this.$refs.addForm.resetFields()
      }
      Object.keys(this.dataForm).forEach((key) => {
        this.dataForm[key] = ''
      })
      this.videoUrl = ''
      this.selectOptions = [
        {
          label: 'A',
          text: '',
          imgUrl: '',
          image: ''
        },
        {
          label: 'B',
          text: '',
          imgUrl: '',
          image: ''
        },
        {
          label: 'C',
          text: '',
          imgUrl: '',
          image: ''
        },
        {
          label: 'D',
          text: '',
          imgUrl: '',
          image: ''
        }
      ]
      this.dataForm.type = 1
      this.dataForm.difficulty = 1
    },
    close() {
      this.formReset()
    }
  }
}
</script>
<style lang="scss" scoped>
$upWidth: 80px;
$upHeight: 80px;
.question-add {
  ::v-deep .el-form-item {
    display: flex;
    align-items: center;
    &.btn-item-wrap .el-form-item__content {
      margin-left: 0 !important;
      margin-top: 10px;
    }
    &.remark-item-wrap,
    &.answer-item-wrap,
    &.analysis-item-wrap,
    &.title-item-wrap {
      display: block !important;
      .el-form-item__content {
        margin-left: 0 !important;
        margin-top: 40px;
      }
    }
  }
  ::v-deep .el-divider--horizontal {
    margin-bottom: 10px;
  }
  ::v-deep .el-form-item__content {
    margin-left: 20px !important;
  }
  .type-item-wrap,
  .type-item-wrap ::v-deep.el-checkbox {
    display: flex;
    height: 80px;
    width: 460px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    .el-checkbox__label {
      display: flex;
      align-items: center;
    }
  }
  .answer-item-wrap ::v-deep .uploadImg {
    margin-left: 20px;
  }
  .answer-item-wrap ::v-deep .img-wrap,
  .answer-item-wrap ::v-deep .btn-wrap,
  .answer-item-wrap ::v-deep .avatar {
    width: $upWidth;
    height: $upHeight;
  }
  .answer-item-wrap ::v-deep .avatar-uploader-icon {
    width: $upWidth;
    height: $upHeight;
    line-height: $upHeight;
  }
}
</style>
